<template>
	<view v-else class="bg">
			<view class="tabssearch" >
				<u-search inputAlign="center" placeholder="搜索群员" @search="search()" v-model="Name" height="30" actionText="取消"
					:actionStyle="{color:'#fff'}" @custom="celSearch"></u-search>
			</view>
		<view class="group_list">
			<view class="group_member" v-for="item in groupList" :key="item.userID" >
				<view class="avatar" @click="toUser(item.userID)" @longpress="longpress">
					<image :src="item.memberAvatarUrl" mode="aspectFill"></image>
				</view>
				<text>{{item.userName}}</text>
				<view class="del" v-if="isShow" @click="delUser(item.userID)">
					x
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import topStatus from "@/components/topStatus/topStatus.vue";

	export default {
		tabTop: 0,
		components: {
			topStatus
		},
		data() {
			return {
				isShow:false,
				groupList: [], //群列表
				groupID: 0,
				Name:"",
				seachUser:[],
				user:{},
			}
		},

		
		async onLoad(e) {
			// console.log(e);
			this.groupID = e.id
			this.getGroupMember()
			
		},
		methods: {
			// 长按事件
			longpress(){
				// console.log('11111ok');
				this.user=uni.getStorageSync('user');
				if(this.user.UserID===94062){
					this.isShow=true
				}else{
					return
				}
			},
			// 移除群成员
			delUser(id){
				// console.log(id);
				let index=this.groupList.findIndex((item)=>item.userID===id)
				console.log(index);
				let userIDs=[id]
				this.$zim.kickGroupMembers(userIDs,this.groupID).then((res)=>{
					console.log(res);
					this.getGroupMember()
					this.$pv.msg('移除成功')
				})
				this.isShow=false
			},
			async edit(id){
					let user_cache = await this.$api.post('/user/GetUserInfo', {
						ID: parseInt(id)
					});
					
			     },
			// 获取群成员
		  async	getGroupMember(){
			  await this.$zim.queryGroupMemberInfo('159252',this.groupID).then((res)=>{
			  	// console.log('测试',res);
			  })
				await this.$zim.queryGroupMemberList(this.groupID, {
					count: 100,
					nextFlag: 0
				}).then(list => {
					this.groupList = list.userList;
					// console.log(list);
				})
				// console.log(this.groupList);
			},
		async toUser(id) {
				// console.log(id);
				await this.$zim.queryGroupMemberInfo(id.toString(),this.groupID)
				this.nav_to('/pages/user/user_visitor?id=' + id)
			},
			celSearch() {
				this.Name = "";
				this.getGroupMember()
			},
			search() {
				this.groupList.forEach((item)=>{
					if(item.userName==this.Name){
						return this.groupList=[item]
					}
					if(item.userID==this.Name){
						return this.groupList=[item]
					}
				})
			},
			
		},
		onShow() {
			this.getGroupMember()
		}
	}
</script>

<style lang="scss">
	.tabssearch {
		display: flex;
		align-items: center;
		height: 44px;
		width: 600rpx;
		box-sizing: border-box;
		margin: 0 auto;
	}

	.group_list {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 20rpx;

		.group_member {
			position: relative;
			width: 100rpx;
			height: 160rpx;
			display: flex;
			flex-direction: column;
			padding-top: 20rpx;
			margin-left: 36rpx;

			.avatar {
				box-sizing: border-box;
				width: 100%;
				height: 100rpx;
				border: 2rpx solid #fff;
				border-radius: 15rpx;
				overflow: hidden;
				
				image {
					width: 100%;
					height: 100%;
				}
			}

			text {
				text-align: center;
				width: 100rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 15px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.del{
				position: absolute;
				top: 15rpx;
				right: 0;
				width: 35rpx;
				height: 35rpx;
				border-radius: 50%;
				text-align: center;
				line-height: 35rpx;
				background-color: #fff;
				font-size: 12px;
				color: #000;
			}
		}
	}
</style>